<template>
  <div class="book-list">
    <h1>搜索结果: {{ query }}</h1>
    <template>
      <div>
        <book-card :books="filteredBooks"></book-card>
      </div>
    </template>
  </div>
</template>

<script>
import {books} from "@/assets/data/booksData";
import BookCard from "@/components/Bookcard.vue";

export default {
  name: 'SearchResults',
  props: ['query'], // 使用 props，默认是接收所有路由参数
  components: {
    BookCard,
  },
  computed: {
    filteredBooks() {
      return this.query
          ? books.filter((book) =>
              book.title.toLowerCase().includes(this.query.toLowerCase()) ||
              book.author.toLowerCase().includes(this.query.toLowerCase())
          )
          : [];
    },
  },
};
</script>

